<template>
  <div>
    <Dialog
      ref="dialog"
      :headerStatus="false"
      title="个人信息"
      width="1000"
      style="max-height: 0 !important"
    >
      <div style="cursor: pointer">
        <!-- <div>
          <Close class="close" @click="btn" />
        </div> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="个人资料" name="first">
            <userInfo :studentData="props.studentData"></userInfo>
          </el-tab-pane>
          <!-- <el-tab-pane label="成绩分析" name="fourth">
				<userAnalyse ref="analyse"></userAnalyse>
			</el-tab-pane> -->
          <!-- <el-tab-pane label="用户关注" name="fourth1">
          <attentionUser ref="attention"></attentionUser>
        </el-tab-pane> -->
          <!-- <el-tab-pane label="填报统计" name="fourth2">
				<volunteerUser></volunteerUser>
			</el-tab-pane> -->
          <el-tab-pane label="志愿表" name="fourth3">
            <volunteerList :studentData="studentData"></volunteerList>
          </el-tab-pane>
        </el-tabs>
      </div>
    </Dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import Dialog from '@/components/Dialog/Dialog.vue';
import userInfo from './userInfo.vue';
import volunteerList from './volunteerList.vue';

const props = defineProps({
  studentData: {
    type: Object,
    default: {},
  },
});

const activeName = ref('first');
const dialog = ref(null);
// const analyse = ref(null);

function openChange(val) {
  dialog.value.openChange();
  activeName.value = val;
}

function handleClick(val) {
  if (val.index == 1) {
  }
}
defineExpose({
  openChange,
});
</script>
<style lang="scss" scoped>
:deep(.el-tabs__item.is-active) {
  color: #1d2129;
  font-weight: 600;
}

:deep(.el-tabs__active-bar) {
  height: 3px;
  background-color: #1d2129;
}

:deep(.el-tabs__item) {
  height: 52px;
  line-height: 52px;
  color: #4e5969;
  font-size: 20px;
}
:deep(.el-dialog) {
  max-height: none !important;
}
.close {
  width: 2em;
  height: 2em;
  float: right;
  font-size: 16px;
  margin-top: 8px;
  position: relative;
  left: -30px;
}
</style>
